<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>遍历操作与DOM绘制</title>
</head>
<body>
    <script>
        let hd = {name : "xiasnn",age : 18};
        console.log(Object.keys(hd));
        console.log(Object.values(hd));
        console.log(JSON.stringify(Object.entries(hd),null,2));

        // 对象可以用for...in...遍历
        for (const key in hd) {
            console.log(key);
            console.log(hd[key]);
        }

        // 一般情况下，对象不可以用for...of...遍历
        // for (const iterator of hd) {
        //     console.log(iterator);
        // }


        // 可以使用Object的方法进行转换
        for (const iterator of Object.keys(hd)) {
            console.log(iterator);
        }
        for (const iterator of Object.values(hd)) {
            console.log(iterator);
        }
        for (const [key,value] of Object.entries(hd)) {
            console.log(key,value);
        }



        // DOM元素的绘制
        let lessons = [
            {name:'css',price:99},
            {name:'html',price:89},
            {name:'js',price:109}
        ];
        let ul = document.createElement('ul');
        for (const value of lessons) {
            let li = document.createElement('li');
            li.innerHTML = `课程名：${value.name}，价格：${value.price}`;
            ul.appendChild(li);
        }
        document.body.appendChild(ul);
    </script>
</body>
</html>